<template>
  <div>
    <h2>Home: {{ $store.state.counter }}</h2>
    <h2>Home: {{ counter }}</h2>
    <h2>Home: {{ name }}</h2>
    <h2>Home: {{ age }}</h2>
    <h2>Home: {{ height }}</h2>
  </div>
</template>

<script>
import { computed } from "vue";
import { mapState, useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const sCounter = computed(() => store.state.counter);
    // const sName = computed(() => store.state.name);
    // const sAge = computed(() => store.state.age);

    const storeStateFns = mapState(["counter", "name", "height", "age"]);

    //{name: function, age: function, height: function}
    //{name: ref, age: ref, height: ref}

    const storeState = {};

    Object.keys(storeStateFns).forEach((fnKey) => {
      const fn = storeStateFns[fnKey].bind({ $store: store });
      storeState[fnKey] = computed(fn);
    });
    return {
      sCounter,
      ...storeState,
    };
  },
};
</script>

<style scoped>
</style>